import React, { Component } from 'react';
import axios from 'axios';
import { Switch, Redirect } from 'react-router-dom';
// import $ from  'jquery'
import { Spin } from 'antd';
import { NavLink } from 'react-router-dom';
import './SingerList.scss';
class Com extends Component {
  constructor (props) {
    super(props)
    this.state = {
        singerList : [],
        ImgList : [],
        loading : true
    }
  }
  
  seek (e) {
      this.setState({
        loading : true
      })
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+e.target.innerHTML+'&type=singer&limit=80&offset=0')
    .then(data => {
        this.setState({
            singerList : data.data.data.artists,
            loading : false
        })
    })
    this.refs.ImgList.style.display = 'none'
    // $('.ImgList').slideUp(500)
  }

  seek2 (e) {
    this.setState({
        loading : true
    })
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s='+e+'&type=singer&limit=80&offset=0')
    .then(data => {
        this.setState({
            singerList : data.data.data.artists,
            loading : false
        })
    })
    this.refs.ImgList.style.display = 'block'
    // $('.ImgList').slideDown(500)
  }

  componentDidMount () {
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=qs&type=singer&limit=80&offset=0')
    .then(data => {
        this.setState({
            singerList : data.data.data.artists
        })
    })
    axios.get('https://api.bzqll.com/music/netease/search?key=579621905&s=热门&type=singer&limit=10&offset=0')
    .then(data => {
        this.setState({
            ImgList : data.data.data.artists,
            loading :false
        })
    })
  }

  render () {
    return (
      <div className = "SingerList">
        <div className="banner">

        </div>
        <div className="list">
            <ul>
                <li>
                    <NavLink to="/musichall/singer/热门" onClick={()=>{this.seek2('qs')}}>热门</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/a" onClick={(e)=>{this.seek(e)}}>A</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/b" onClick={(e)=>{this.seek(e)}}>B</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/c" onClick={(e)=>{this.seek(e)}}>C</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/d" onClick={(e)=>{this.seek(e)}}>D</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/e" onClick={(e)=>{this.seek(e)}}>E</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/f" onClick={(e)=>{this.seek(e)}}>F</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/g" onClick={(e)=>{this.seek(e)}}>G</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/h" onClick={(e)=>{this.seek(e)}}>H</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/i" onClick={(e)=>{this.seek(e)}}>I</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/j" onClick={(e)=>{this.seek(e)}}>J</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/k" onClick={(e)=>{this.seek(e)}}>K</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/l" onClick={(e)=>{this.seek(e)}}>L</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/m" onClick={(e)=>{this.seek(e)}}>M</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/n" onClick={(e)=>{this.seek(e)}}>N</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/o" onClick={(e)=>{this.seek(e)}}>O</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/p" onClick={(e)=>{this.seek(e)}}>P</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/q" onClick={(e)=>{this.seek(e)}}>Q</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/r" onClick={(e)=>{this.seek(e)}}>R</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/s" onClick={(e)=>{this.seek(e)}}>S</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/t" onClick={(e)=>{this.seek(e)}}>T</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/u" onClick={(e)=>{this.seek(e)}}>U</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/v" onClick={(e)=>{this.seek(e)}}>V</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/w" onClick={(e)=>{this.seek(e)}}>W</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/x" onClick={(e)=>{this.seek(e)}}>X</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/y" onClick={(e)=>{this.seek(e)}}>Y</NavLink>
                </li>
                <li>
                    <NavLink to="/musichall/singer/z" onClick={(e)=>{this.seek(e)}}>Z</NavLink>
                </li>
            </ul>
        </div>
        <div className="ImgList" ref='ImgList'>
            <ul>
                {
                    this.state.loading
                    ?
                    <Spin size="large" spinning="true"/>
                    :
                    this.state.ImgList.map((item, index) => {
                    return (
                        <li key={ item.id }>
                            <img src={ item.picUrl } alt=""/>
                            <p>{ item.name }</p>
                        </li>
                    )
                    })
                }
            </ul>
        </div>
        <div className="NameList">
            <ul>
                {
                    this.state.loading
                    ?
                    <Spin size="large" spinning="true"/>
                    :
                    this.state.singerList.map((item, index) => {
                    return (
                        <li key={ item.id }>
                            { item.name }
                        </li>
                    )
                    })
                }
            </ul>
        </div>
        <Switch>
            <Redirect to='/musichall/singer/热门'/>
        </Switch>
      </div>
    )
  }
}

export default Com;
